<style lang="less">
    @import './login.less';
</style>

<template>
    <div class="login">
        <div class="login-con">
            <div class="logo">
                <img src="@/assets/images/logo.png" alt="">
            </div>
            <Card icon="log-in" :bordered="false">
                <Tabs value="tab2" @on-click="changeTabs">

                    <TabPane class="login-tip" label="密码登录" name="tab1">
                        <div class="form-con">
                            <login-form @on-success-valid="handleSubmit"></login-form>
                        </div>
                    </TabPane>

                    <TabPane label="扫码登录" name="tab2">
                        <div class="qrcode_div">
                            <qrcode-vue :value="qrcodeUrl" :size="size" level="H"></qrcode-vue>
                            <div class="qrcode_div_success" v-if="qrcodeStatus == 1">
                                <p>
                                    <Icon type="md-checkmark-circle" />
                                </p>
                                <p>扫描成功</p>
                            </div>
                            <div class="qrcode_div_success" v-if="qrcodeStatus == -1" @click="getCode">
                                <p>
                                    <Icon type="md-refresh" />
                                </p>
                                <p>刷新二维码</p>
                            </div>
                        </div>
                    </TabPane>
                </Tabs>
            </Card>
        </div>
    </div>
</template>

<script>
    import LoginForm from '_c/login-form'
    import QrcodeVue from 'qrcode.vue'
    import axios from '@/libs/api.request'
    import {
        mapActions
    } from 'vuex'
    export default {
        components: {
            LoginForm,
            QrcodeVue
        },
        data() {
            return {
                tabValue: 1,

                // 是否可以登录
                isCanLogin: true,
                // 是否登录
                islogin: false,

                qrcodeUrl: 'https://example.com',
                size: 160,
                qrcodeStatus: 0,
                code: '',
            }
        },
        methods: {
            ...mapActions([
                'handleLogin',
                'getUserInfo'
            ]),
            // 登录
            handleSubmit({
                userName,
                password
            }) {
                this.handleLogin({
                    userName,
                    password
                }).then(res => {
                    if (res.code == 1) {
                        this.$Notice.success({
                            title: '登录成功!',
                            duration: 3
                        })
                        localStorage.setItem('tagNaveList', [])
                        this.getUserInfo().then(res => {
                            this.$router.push({
                                name: this.$config.homeName
                            })
                        })
                    } else {
                        this.$Notice.error({
                            title: res.msg,
                            duration: 3
                        })
                    }
                })
            },

            // 获取二维码code
            getCode() {
                axios.ajax_post('admin-login-ajax_get_qrcode_code', {}).then(res => {
                    if (res.data.code == 1) {
                        this.code = res.data.data.code
                        var str = {
                            "path": "/pages/home/home",
                            "code": this.code
                        }
                        this.qrcodeUrl = JSON.stringify(str)
                        console.log(this.qrcodeUrl);

                        this.isCanLogin = true
                        this.qrcodeStatus = 0
                        this.sweepCodeLogin()
                    }
                })

            },

            // 扫码登录
            sweepCodeLogin() {
                var that = this
                console.log('sweepCodeLogin ## isCanLogin is', this.isCanLogin)
                if (this.isCanLogin && !this.islogin) {
                    var data = {
                        "code": this.code
                    }
                    // 发送ajax
                    axios.ajax_post('admin-login-ajax_qrcode_login', data).then(res => {
                        if (res.data.code == 1) {
                            this.code = res.data.data.code
                            this.qrcodeStatus = 1
                            this.$Notice.success({
                                title: '登录成功!',
                                duration: 3
                            })
                            // 是否登录
                            this.islogin = true
                            // 是否可以登录
                            this.isCanLogin = false

                            this.$store.commit('setToken', res.data.data.token)
                            this.getUserInfo().then(res => {
                                this.$router.push({
                                    name: this.$config.homeName
                                })
                            })
                        } else if (res.data.code == -1) {
                            // 超时
                            // 二维码状态
                            this.qrcodeStatus = -1
                            this.isCanLogin = false
                        } else if (res.data.code == -2) {
                            setTimeout(() => {
                                this.sweepCodeLogin()
                            }, 3000);
                        } else {
                            this.qrcodeStatus = -1
                            this.sf_can_send = false
                            this.$Notice.error({
                                title: res.msg,
                                duration: 3
                            })
                        }
                    })
                }
            },
            
            changeTabs(name) {
                if (name === "tab1") {
                    this.isCanLogin = false
                } else {
                    this.isCanLogin = true
                    this.getCode()
                }
            }
        },
        created() {
            this.getCode()
        },
    }
</script>

<style lang="less" scoped>
    .logo img {
        width: 369px;
        height: 100px;
        margin-bottom: 10px;
    }
</style>